<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script src="/layer/layer.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form id="myForm" action="index.html" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">角色名称</td>
            <td><input type="text" name="roleName"/></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="roleState" value="0" checked/> 启用
                <input type="radio" name="roleState" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">权限</td>
            <td id="menuList">

            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="button" class="btn btn-primary" id="addRole">保存</button> &nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script src="/layer/layer.js"></script>
<script>
    $(function () {
        $(':checkbox[name="group[]"]').click(function () {
            $(':checkbox', $(this).closest('li')).prop('checked', this.checked);
        });
        $("#backid").click(function () {
            window.location.href = "index.html";
        });
        getMenuList();
        $("#addRole").click(function () {
            // alert($("#myForm").serialize());
            let roleName = $("input[name='roleName']").val();
            let groupList = $("input[name='group[]']");
            let flag=$("input[name='group[]").is(":checked");
            if(validate(roleName)){
              if(flag){
                  $.ajax({
                      type: "GET",
                      url: "/role",
                      data: "roleName="+roleName,
                      dataType: "json",
                      success: function (vo) {
                          if (vo.code == 200) {
                              addRole();
                          } else {
                              layer.msg("角色名称重复！");
                          }
                      }
                  });
              }else {
                  layer.msg("请选择权限！");
              }
            }
        });
    });

    function getMenuList() {
        $.ajax({
            type: "GET",
            url: "/role/menuList",
            data: "",
            dataType: "json",
            success: function (vo) {
                let menuList=vo.list;
                let str = "";
                for (let i = menuList.length-1; i >=    0; i--) {
                    let obj=menuList[i];
                    str+="<ul><label class='checkbox inline'><input type='checkbox' name='group[]' value='"+obj.menuId+"' />"+obj.menuName+"</label></ul> ";
                }
                $("#menuList").html(str);
            }
        });
    }
    function addRole() {
            $.ajax({
                type: "POST",
                url: "/role/",
                data: $("#myForm").serialize(),
                dataType: "json",
                success: function (vo) {
                    if(vo.code==200) {
                        layer.msg("添加成功");
                        //window.location.href = "index.html";
                        $("input[name='roleName']").val("");
                        $("input[name='roleState']:eq(0)").prop("checked","true");
                        $("input[name='group[]']").prop("checked",false);
                    }else{
                        layer.msg(vo.msg);
                    }
                }
            });
    }
    function validate(roleName) {
        if (roleName == null || roleName.length == 0) {
            layer.msg("角色名称不能为空");
            return false;
        }
        return true;
    }
</script>